<template>
  <div>
    <div class="chart">
      <img src="/image/地图背景.png" class="back" />
      <div ref="chart" style="width: 1080px; height: 960px"></div>
      <div
        v-for="(v, k) in chartData"
        :key="k"
        class="marker"
        :style="
          chart
            ? {
                left: chart.convertToPixel('geo', v.value)[0] + 'px',
                top: chart.convertToPixel('geo', v.value)[1] + 'px',
              }
            : {}
        "
      >
        <div
          :class="['one', v.name == activeMarker ? 'active' : '']"
          @click="changeMarker(v.name)"
        >
          <div class="two">
            <div class="three">
              <div class="hreart"></div>
            </div>
          </div>
        </div>
        <svg
          :class="[v.name == activeMarker ? 'active' : '']"
          style="
            position: absolute;
            left: 0;
            top: -30px;
            width: 100px;
            height: 30px;
          "
        >
          <line
            x1="0"
            y1="30"
            x2="70"
            y2="0"
            stroke="#fdbd00b3"
            stroke-width="2"
          />
          <line
            x1="70"
            y1="0"
            x2="100"
            y2="0"
            stroke="#fdbd00b3"
            stroke-width="4"
          />
        </svg>
        <div :class="['content', v.name == activeMarker ? 'active' : '']">
          <div class="before"></div>
          <div class="c_c">
            <div class="title">{{ v.name }}</div>
            <div class="detail">
              <div class="text">更多</div>
              <img class="arrow" src="/image/更多双箭头.png" />
            </div>
            <div class="currentEvents">
              <div class="item" v-for="(v2, k2) in v.currentEvents" :key="k2">
                <img class="yuan" src="/image/黄色导读点.png" />
                <div class="text">{{ v2.title }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="but" @click="shuchu">输出</div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import chinaMap from "../public/data/china2.json";
import chinaBorderMap from "../public/data/chinaBorder2.json";
echarts.registerMap("china", chinaMap);
echarts.registerMap("chinaBorder", chinaBorderMap);
export default {
  name: "WorldMap",
  data() {
    return {
      chart: null,
      activeMarker: "中美演习对峙",
      chartData: [
        {
          name: "中国",
          value: [116.4074, 39.9042],
          currentEvents: [
            {
              title: "美国及其盟友在南海和台海频繁举行军事演习，中国则通",
              id: "55a48",
            },
            {
              title: "美国及其盟友在南海和台海频繁举行军事演习，中国则通",
              id: "55a48",
            },
            {
              title: "美国及其盟友在南海和台海频繁举行军事演习，中国则通",
              id: "55a48",
            },
          ],
        },
        {
          name: "美国",
          value: [-74.006, 40.7128],
          currentEvents: [
            {
              title: "美国及其盟友在南海和台海频繁举行军事演习，中国则通",
              id: "55a48",
            },
            {
              title: "美国及其盟友在南海和台海频繁举行军事演习，中国则通",
              id: "55a48",
            },
            {
              title: "美国及其盟友在南海和台海频繁举行军事演习，中国则通",
              id: "55a48",
            },
          ],
        },
        {
          name: "英国",
          value: [-0.1276, 51.5074],
          currentEvents: [
            {
              title: "美国及其盟友在南海和台海频繁举行军事演习，中国则通",
              id: "55a48",
            },
            {
              title: "美国及其盟友在南海和台海频繁举行军事演习，中国则通",
              id: "55a48",
            },
            {
              title: "美国及其盟友在南海和台海频繁举行军事演习，中国则通",
              id: "55a48",
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    shuchu() {
      // const pixelPoint = this.chart.convertToPixel('geo', [116.4074, 39.9042]);
      // console.log(666,pixelPoint);
    },
    changeMarker(name) {
      this.activeMarker = name;
    },
    async initChart() {
      this.chart = echarts.init(this.$refs.chart);
      let option = {
        backgroundColor: "transparent",
        geo: [
          {
            map: "chinaBorder", //地图类型。
            type: "map",
            layoutCenter: ["50%", "60%"],
            layoutSize: "100%",
            zoom: 1,
            roam: false,
            itemStyle: {
              areaColor: "transparent",
              borderWidth: 2,
              borderColor: "#69b2ff",
              emphasis: {
                borderWidth: 1,
                shadowColor: "rgba(1, 39, 44, 1)",
                shadowOffsetX: 0,
                shadowOffsetY: 8,
              },
            },
          },
          {
            map: "china", //地图类型。
            type: "map",
            layoutCenter: ["50%", "60%"],
            layoutSize: "100%",
            zoom: 1,
            roam: false,
            itemStyle: {
              // areaColor: '#416cbb',
              areaColor: "transparent",
              // areaColor: {
              //   image: mapbg, //
              //   repeat: 'repeat' // // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
              // },
              borderWidth: 1,
              borderColor: "#174d89",
              emphasis: {
                borderWidth: 1,
                shadowColor: "rgba(1, 39, 44, 1)",
                shadowOffsetX: 0,
                shadowOffsetY: 8,
              },
            },
          },
        ],
        series: [
          {
            name: "自定义标注",
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,
            data: this.chartData,
            tooltip: {
              show: true,
              formatter: "{b}",
            },
            symbolSize: 10,
            label: {
              show: false,
              formatter: "{b}", // 显示名称
              position: "right",
              color: "#fff",
            },
            itemStyle: {
              color: "#ff5722", // 标注点颜色
            },
          },
        ],
      };

      this.chart.setOption(option);
      // 窗口大小变化时，自动调整图表大小
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
    window.removeEventListener("resize", this.chart.resize);
  },
};
</script>

<style lang="less" scoped>
.chart {
  //   background-color: #0a2449;
  position: relative;
  width: 1080px;
  height: 960px;
  .back {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -10;
  }
  .marker {
    // opacity: 0.5;
    position: absolute;
    left: 1034px;
    top: 205px;
    .one {
      position: absolute;
      left: 0;
      z-index: 9;
      top: 0;
      transform: translateX(-50%) translateY(-50%);
      // border: 0px dashed #fdbd00;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      display: flex;
      &.active {
        border: 1px dashed #fdbd00;
      }
      .two {
        width: 22px;
        height: 22px;
        background: #fcbc00;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        .three {
          width: 12px;
          height: 12px;
          background: #5f6148;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
        }
      }
    }
    svg {
      display: none;
      &.active {
        display: block;
      }
    }
    .content {
      display: none;
      color: #ffffff;
      width: 200px;
      height: 200px;
      // background: #fcbc00;
      position: absolute;
      left: 100px;
      top: -60px;
      z-index: 10;
      &.active {
        display: block;
      }
      .before {
        width: 2px;
        height: 32px;
        background: #fdbd00;
        position: absolute;
        left: 0;
        top: 16px;
      }
      .c_c {
        width: 198px;
        height: 100%;
        position: absolute;
        left: 2px;
        top: 0;
        background: rgba(179, 134, 0, 0.3);
        .title {
          height: 45px;
          line-height: 45px;
          width: 100%;
          padding-left: 16px;
          font-size: 16px;
          font-weight: 500;
          background: rgba(12, 10, 0, 0.8);
          box-sizing: border-box;
        }
        .detail {
          color: #fdbd00;
          font-size: 14px;
          font-weight: 400;
          position: absolute;
          right: 16px;
          top: 12px;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          .text {
          }
          .arrow {
            display: block;
            margin-left: 5px;
          }
        }
        .currentEvents {
          padding: 10px 14px;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0;
          line-height: 24px;
          position: relative;
          .item {
            width: 166px;
            height: 30px;
            line-height: 30px;
            position: relative;
            cursor: pointer;
            .yuan {
              position: absolute;
              display: block;
              left: 0;
              top: 5px;
              width: 20px;
              height: 20px;
            }
            .text {
              width: 144px;
              height: 30px;
              position: absolute;
              left: 22px;
              top: 0px;
              white-space: nowrap; /* 禁止换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis;
              font-size: 14px;
              color: #ffffff;
              letter-spacing: 0;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}
.but {
  position: absolute;
  top: 0;
  left: 0;
  background: #fdbd00b3;
  z-index: 99;
}
</style>



